<template>
  <el-aside :width="asideWidth" class="aside">
    <div class="menu-title" v-show="!collapse">后台管理系统</div>
    <el-menu  :default-active="activeMenu" :collapse="collapse" text-color="#fff" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo">
      <el-menu-item @click="clickMenu(item)" :index="item.path" v-for="item in noChildren" :key="item.path">
        <component class="icons" :is="item.icon" />
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in hasChildren" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon" />
          <span>{{item.label}}</span>
        </template>
        <el-menu-item-group v-for="i in item.children" :key="i.path">
          <el-menu-item :index="i.path">
            <component class="icons" :is="i.icon" />
            <span>{{i.label}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>
<script setup>
import { ref, computed } from "vue"
import { useAllDataStore } from "@/stores/index.js"
import { useRoute,useRouter } from "vue-router"
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useAllDataStore()
// 💡 在这里你也可以直接使用 `store.doubleCount`
let collapse = computed(() => store.state.collapse)

const asideWidth = computed(() => (store.state.collapse? "64px" : "180px"))

const list =computed(()=>store.state.menuList)

const route = useRoute()
const activeMenu = computed(() => route.path)
const noChildren = computed(() => list.value.filter((item) => !item.children))
const hasChildren = computed(() =>
  list.value.filter((item) => item.children && item.children.length > 0)
)

const router = useRouter()
const clickMenu = (menu) => {
  console.log(menu);
  router.push(menu.name)
  store.selectMenu(menu)
}
</script>
<style scoped lang="less">
.icons {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.menu-title {
  height: 40px;
  line-height: 40px;
  color: #fff;
  padding-left: 20px;
  font-size: 18px;
}
.el-menu {
  background: transparent;
  border-right: none;
  h3 {
    line-height: 48px;
    color: #fff;
    text-align: center;
  }
}
.el-aside {
  height: 100%;
  background-color: #545c64;
  transition: all 0.3s;
}

</style>